<template>
  <view class="container">
    <!-- 添加返回按钮和标题 -->
    <!--    <view class="header">
      <view class="header-content">
        <page-header title="轮候公示" subtitle="" start-color="#39c5bb" end-color="#398dee" height="40rpx" />
      </view>
    </view> -->
    <wd-navbar left-arrow @click-left="handleClickLeft" title="西湖镇"></wd-navbar>

    <!-- 表格头部 -->
    <view class="table-header">
      <view class="th th-region">区域</view>
      <view class="th th-quota">可办额度</view>
      <view class="th th-waiting">排队中</view>
      <view class="th th-completed">已排到</view>
    </view>

    <!-- 表格内容 -->
    <view class="table-content">
      <view class="table-row" v-for="(item, index) in areaList" :key="index" @click="goToDetail(item)">
        <view class="td td-region">{{ item.region }}</view>
        <view class="td td-quota">{{ item.quota }}</view>
        <view class="td td-waiting">{{ item.waiting }}</view>
        <view class="td td-completed">{{ item.completed }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import PageHeader from '@/components/page-header/page-header.vue'

// 区域列表数据
const areaList = ref([
  { region: '南昌市', quota: 413, waiting: 25, completed: 29 },
  { region: '景德镇市', quota: 197, waiting: 3, completed: 4 },
  { region: '萍乡市', quota: 37, waiting: 629, completed: 55 },
  { region: '九江市', quota: 118, waiting: 956, completed: 428 },
  { region: '新余市', quota: 39, waiting: 171, completed: 46 },
  { region: '鹰潭市', quota: 40, waiting: 149, completed: 61 },
  { region: '赣州市', quota: 360, waiting: 2275, completed: 1443 },
  { region: '吉安市', quota: 944, waiting: 319, completed: 137 },
  { region: '宜春市', quota: 197, waiting: 226, completed: 112 },
  { region: '抚州市', quota: 342, waiting: 74, completed: 175 },
  { region: '上饶市', quota: 138, waiting: 2387, completed: 320 }
])

// 返回上一页
const handleClickLeft = () => {
  // uni.navigateBack()
}

// 跳转到详情页
const goToDetail = (item) => {
  uni.navigateTo({
    url: `/pages/guide/detail?region=${encodeURIComponent(item.region)}`
  })
}
</script>

<style lang="scss">
@import '@/styles/common.scss';

.container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.back-btn {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.header-content {
  flex: 1;
}

.table-header {
  display: flex;
  background: linear-gradient(90deg, #39c5bb, #398dee);
  padding: 25rpx 0;
  border-top-left-radius: 12rpx;
  border-top-right-radius: 12rpx;
  font-weight: bold;
  margin-top: 20rpx;
}

.th {
  text-align: center;
  font-size: 28rpx;
  color: #ffffff;
}

.th-region {
  flex: 2;
}

.th-quota,
.th-waiting,
.th-completed {
  flex: 1;
}

.table-content {
  background-color: #fff;
  border-bottom-left-radius: 12rpx;
  border-bottom-right-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.table-row {
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #ebeef5;
  transition: all 0.3s;
}

.table-row:nth-child(odd) {
  background-color: #f8f8f8;
}

.table-row:active {
  background-color: #ecf5ff;
}

.table-row:last-child {
  border-bottom: none;
}

.td {
  text-align: center;
  font-size: 28rpx;
  color: #303133;
}

.td-region {
  flex: 2;
  font-weight: 500;
}

.td-quota,
.td-waiting,
.td-completed {
  flex: 1;
}

/* 添加一些颜色区分 */
.td-quota {
  color: #409eff;
  font-weight: bold;
}

.td-waiting {
  color: #e6a23c;
  font-weight: bold;
}

.td-completed {
  color: #67c23a;
  font-weight: bold;
}
</style>
